<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部署编排 - 一体化作战平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066cc',
                        secondary: '#0099cc',
                        success: '#009966',
                        warning: '#ff9900',
                        danger: '#cc3300',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#c0c4cc',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1f2937',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .border-transition {
                transition: border-color 300ms ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between px-4 py-3">
            <!-- Logo和标题 -->
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-primary rounded-md flex items-center justify-center text-white">
                    <i class="fa fa-bank text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-neutral-700 hidden md:block">一体化作战平台</h1>
                <h1 class="text-lg font-bold text-neutral-700 md:hidden">研发交付平台</h1>
            </div>
            
            <!-- 搜索框 -->
            <div class="hidden md:flex relative flex-1 max-w-md mx-4">
                <input type="text" placeholder="搜索发布单元..." 
                    class="w-full pl-10 pr-4 py-2 rounded-md border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>
            
            <!-- 右侧用户区域 -->
            <div class="flex items-center space-x-1 md:space-x-4">
                <!-- 返回按钮 -->
                <button id="back-button" class="p-2 rounded-full hover:bg-neutral-100 transition-all-300" title="返回">
                    <i class="fa fa-arrow-left text-lg text-neutral-600"></i>
                </button>
                
                <!-- 通知按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300">
                    <i class="fa fa-bell-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                </button>
                
                <!-- 用户头像 -->
                <div class="flex items-center space-x-2 ml-2">
                    <div class="w-8 h-8 bg-neutral-200 rounded-full overflow-hidden">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <span class="hidden md:block text-sm font-medium text-neutral-700">张三</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="flex pt-16 flex-1">
        <!-- 左侧导航菜单 -->
        <aside class="w-16 md:w-64 bg-white shadow-sm fixed h-full left-0 top-16 overflow-y-auto scrollbar-hide transform md:transform-none transition-transform duration-300 z-40 -translate-x-full md:translate-x-0">
            <nav class="py-4">
                <ul>
                    <!-- 主导航项 -->
                    <li class="mb-1">
                        <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-tachometer text-lg"></i>
                            <span class="hidden md:block">首页</span>
                        </a>
                    </li>
                    
                    <!-- 交付流程模块 -->
                    <li class="mb-1">
                        <a href="business_strategy.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-line-chart text-lg"></i>
                            <span class="hidden md:block">业务战略</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="architecture-management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-sitemap text-lg"></i>
                            <span class="hidden md:block">架构管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="requirementsManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-list-alt text-lg"></i>
                            <span class="hidden md:block">需求管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="design-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="design_management.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-paint-brush text-lg"></i>
                                    <span class="hidden md:block">设计管理</span>
                                </a>
                                <button id="design-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="design-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="interface_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-plug text-sm"></i>
                                        <span class="hidden md:block">接口管理</span>
                                    </a>
                                    <a href="model_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cubes text-sm"></i>
                                        <span class="hidden md:block">模型管理</span>
                                    </a>
                                    <a href="data_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-database text-sm"></i>
                                        <span class="hidden md:block">字典管理</span>
                                    </a>
                                    <a href="ui_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-desktop text-sm"></i>
                                        <span class="hidden md:block">差异分析</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="schedule_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-calendar text-lg"></i>
                            <span class="hidden md:block">排期管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="developmentMage.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-code text-lg"></i>
                            <span class="hidden md:block">开发管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="test-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="testManagement.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-bug text-lg"></i>
                                    <span class="hidden md:block">测试管理</span>
                                </a>
                                <button id="test-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="test-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="test_cases.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-file-text-o text-sm"></i>
                                        <span class="hidden md:block">测试案例</span>
                                    </a>
                                    <a href="test_plans.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-calendar-check-o text-sm"></i>
                                        <span class="hidden md:block">测试计划</span>
                                    </a>
                                    <a href="test_reports.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-bar-chart text-sm"></i>
                                        <span class="hidden md:block">测试报告</span>
                                    </a>
                                    <a href="test_global_settings.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cogs text-sm"></i>
                                        <span class="hidden md:block">全局设置</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="production_workflow.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-rocket text-lg"></i>
                            <span class="hidden md:block">投产上线</span>
                        </a>
                    </li>
                    
                    <!-- 新增的三个子菜单项 -->
                    <li class="mb-1">
                        <a href="quality_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-check-circle text-lg"></i>
                            <span class="hidden md:block">质量管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="security_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-shield text-lg"></i>
                            <span class="hidden md:block">安全管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="efficiency_metrics.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-bar-chart text-lg"></i>
                            <span class="hidden md:block">效能度量</span>
                        </a>
                    </li>
                    
                    <!-- 分隔线 -->
                    <li class="my-2">
                        <div class="border-t border-neutral-200 mx-4"></div>
                    </li>
                    
                    <!-- 公共模块 -->
                    <li class="mb-1">
                        <a href="teamManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-users text-lg"></i>
                            <span class="hidden md:block">团队管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="settings.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-cog text-lg"></i>
                            <span class="hidden md:block">设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 ml-16 md:ml-64 p-4 md:p-6 bg-neutral-100 min-h-screen">
            <!-- 面包屑导航 -->
            <div class="mb-6">
                <nav class="flex" aria-label="面包屑">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="index.html" class="inline-flex items-center text-sm font-medium text-neutral-500 hover:text-primary">
                                <i class="fa fa-home mr-2"></i>
                                首页
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <i class="fa fa-chevron-right text-neutral-400 text-xs mx-2"></i>
                                <span class="text-sm font-medium text-neutral-500 hover:text-primary">系统设置</span>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <i class="fa fa-chevron-right text-neutral-400 text-xs mx-2"></i>
                                <span class="text-sm font-medium text-neutral-700">部署编排</span>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- 页面标题 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
                <div class="flex items-center gap-4">
                    <h2 class="text-lg md:text-xl font-bold text-neutral-700">部署编排</h2>
                    <div class="relative">
                        <select id="system-filter" class="pl-3 pr-8 py-2 text-sm border border-neutral-200 rounded-md bg-white text-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300 appearance-none cursor-pointer">
                            <option value="ipdo" selected>IPDO-一站式研发平台</option>
                            <option value="other1">其他系统1</option>
                            <option value="other2">其他系统2</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <button class="px-4 py-2 bg-white text-primary border border-primary rounded-md hover:bg-primary/5 transition-all-300">
                        <i class="fa fa-refresh mr-2"></i>刷新
                    </button>
                    <button id="add-release-unit-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                        <i class="fa fa-plus mr-2"></i>新增发布单元
                    </button>
                </div>
            </div>

            <!-- 发布单元表格 -->
            <div class="bg-white rounded-lg shadow-card mb-8 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[800px]">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                    </div>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">代码仓库</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">发布单元类型</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">应用标识</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            <!-- 数据行 1 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-server</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">SERVER</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-SERVER</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 数据行 2 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-db</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">DB</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-DB</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 数据行 3 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-app</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">APP</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-APP</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 数据行 4 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-web</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">WEB</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-WEB</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 数据行 5 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-batch</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">BATCH</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-BATCH</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 数据行 6 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-fex</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">FEX</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-FEX</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 数据行 7 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-process</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">PROCESS</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-PROCESS</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>

                            <!-- 数据行 8 -->
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-github"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-neutral-700">ipdo-api</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">API</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-neutral-700">IPDO-API</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    <div class="flex space-x-2">
                                        <button class="text-primary hover:text-primary/80">配置</button>
                                        <button class="text-neutral-500 hover:text-neutral-700">查看</button>
                                        <button class="text-danger hover:text-danger/80">删除</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="px-6 py-4 border-t border-neutral-200 bg-neutral-50 flex items-center justify-between">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <button class="relative inline-flex items-center px-4 py-2 border border-neutral-300 text-sm font-medium rounded-md text-neutral-700 bg-white hover:bg-neutral-50">
                            上一页
                        </button>
                        <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-neutral-300 text-sm font-medium rounded-md text-neutral-700 bg-white hover:bg-neutral-50">
                            下一页
                        </button>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-neutral-700">
                                显示第 <span class="font-medium">1</span> 到 <span class="font-medium">8</span> 条，共 <span class="font-medium">8</span> 条结果
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <span class="sr-only">上一页</span>
                                    <i class="fa fa-chevron-left"></i>
                                </button>
                                <button aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">
                                    1
                                </button>
                                <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <span class="sr-only">下一页</span>
                                    <i class="fa fa-chevron-right"></i>
                                </button>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发布单元部署编排区域 -->
            <div class="mb-8">
                <h3 class="text-lg font-bold text-neutral-700 mb-4">IPDO系统部署流程图</h3>
                <!-- 部署流程图 -->
                <div class="bg-white p-6 rounded-lg shadow-card mb-6">
                    <div class="mb-4">
                        <h4 class="font-medium text-neutral-700 mb-2">部署流程说明</h4>
                        <p class="text-sm text-neutral-600">本流程图展示IPDO系统的完整部署过程，包含8个发布单元，按指定顺序执行，部分单元支持并行部署以提高效率。</p>
                    </div>
                    <div class="flowchart-container overflow-x-auto" style="min-height: 300px;">
                        <!-- 流程图表 -->
                        <svg class="w-full" viewBox="0 0 850 250">
                            <!-- 连接线 -->
                            <defs>
                                <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                                    <polygon points="0 0, 8 3, 0 6" fill="#64748b" />
                                </marker>
                            </defs>
                            <!-- 开始节点 -->
                            <rect x="30" y="120" width="80" height="40" rx="4" fill="#f8fafc" stroke="#3b82f6" stroke-width="1.5" />
                            <text x="70" y="145" text-anchor="middle" fill="#1e40af" font-weight="bold" font-size="12">开始</text>
                            
                            <!-- DB节点 -->
                            <rect x="150" y="120" width="80" height="40" rx="4" fill="#f0fdfa" stroke="#0d9488" stroke-width="1.5" />
                            <text x="190" y="142" text-anchor="middle" fill="#065f46" font-weight="bold" font-size="11">DB</text>
                            <text x="190" y="156" text-anchor="middle" fill="#065f46" font-size="8">IPDO-DB</text>
                            
                            <!-- SERVER节点 -->
                            <rect x="270" y="120" width="80" height="40" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1.5" />
                            <text x="310" y="142" text-anchor="middle" fill="#92400e" font-weight="bold" font-size="11">SERVER</text>
                            <text x="310" y="156" text-anchor="middle" fill="#92400e" font-size="8">IPDO-SERVER</text>
                            
                            <!-- 并行部署提示 -->
                            <text x="390" y="80" text-anchor="middle" fill="#64748b" font-size="10" font-style="italic">并行部署</text>
                            
                            <!-- APP节点 -->
                            <rect x="390" y="60" width="80" height="40" rx="4" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
                            <text x="430" y="82" text-anchor="middle" fill="#0369a1" font-weight="bold" font-size="11">APP</text>
                            <text x="430" y="96" text-anchor="middle" fill="#0369a1" font-size="8">IPDO-APP</text>
                            
                            <!-- WEB节点 -->
                            <rect x="390" y="120" width="80" height="40" rx="4" fill="#dbeafe" stroke="#3b82f6" stroke-width="1.5" />
                            <text x="430" y="142" text-anchor="middle" fill="#1e40af" font-weight="bold" font-size="11">WEB</text>
                            <text x="430" y="156" text-anchor="middle" fill="#1e40af" font-size="8">IPDO-WEB</text>
                            
                            <!-- BATCH节点 -->
                            <rect x="390" y="180" width="80" height="40" rx="4" fill="#fce7f3" stroke="#db2777" stroke-width="1.5" />
                            <text x="430" y="202" text-anchor="middle" fill="#9d174d" font-weight="bold" font-size="11">BATCH</text>
                            <text x="430" y="216" text-anchor="middle" fill="#9d174d" font-size="8">IPDO-BATCH</text>
                            
                            <!-- FEX节点 -->
                            <rect x="510" y="120" width="80" height="40" rx="4" fill="#ede9fe" stroke="#8b5cf6" stroke-width="1.5" />
                            <text x="550" y="142" text-anchor="middle" fill="#5b21b6" font-weight="bold" font-size="11">FEX</text>
                            <text x="550" y="156" text-anchor="middle" fill="#5b21b6" font-size="8">IPDO-FEX</text>
                            
                            <!-- 并行部署提示2 -->
                            <text x="630" y="80" text-anchor="middle" fill="#64748b" font-size="10" font-style="italic">并行部署</text>
                            
                            <!-- PROCESS节点 -->
                            <rect x="630" y="60" width="80" height="40" rx="4" fill="#fef2f2" stroke="#ef4444" stroke-width="1.5" />
                            <text x="670" y="82" text-anchor="middle" fill="#b91c1c" font-weight="bold" font-size="11">PROCESS</text>
                            <text x="670" y="96" text-anchor="middle" fill="#b91c1c" font-size="8">IPDO-PROCESS</text>
                            
                            <!-- API节点 -->
                            <rect x="630" y="120" width="80" height="40" rx="4" fill="#dcfce7" stroke="#22c55e" stroke-width="1.5" />
                            <text x="670" y="142" text-anchor="middle" fill="#15803d" font-weight="bold" font-size="11">API</text>
                            <text x="670" y="156" text-anchor="middle" fill="#15803d" font-size="8">IPDO-API</text>
                            
                            <!-- 结束节点 -->
                            <rect x="750" y="90" width="80" height="40" rx="4" fill="#f8fafc" stroke="#64748b" stroke-width="1.5" />
                            <text x="790" y="115" text-anchor="middle" fill="#334155" font-weight="bold" font-size="12">结束</text>
                            
                            <!-- 连接线 - 水平主流程 -->
                            <line x1="110" y1="140" x2="150" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="230" y1="140" x2="270" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="470" y1="140" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="710" y1="80" x2="750" y2="110" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="710" y1="140" x2="750" y2="130" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            
                            <!-- SERVER到并行节点的连接线 -->
                            <line x1="350" y1="140" x2="390" y2="80" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="350" y1="140" x2="390" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="350" y1="140" x2="390" y2="200" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            
                            <!-- 并行节点到FEX的连接线 -->
                            <line x1="470" y1="80" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="470" y1="200" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            
                            <!-- FEX到并行节点的连接线 -->
                            <line x1="590" y1="140" x2="630" y2="80" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            <line x1="590" y1="140" x2="630" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                            
                            <!-- 确保每个并行节点都连接前一个并行节点 -->
                            <line x1="470" y1="80" x2="470" y2="140" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrowhead)" />
                            <line x1="470" y1="140" x2="470" y2="200" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrowhead)" />
                            <line x1="710" y1="80" x2="710" y2="140" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrowhead)" />
                        </svg>
                    </div>
                </div>
                <!-- 部署单元状态卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <!-- DB单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">数据库部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-db</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-DB</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- SERVER单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">服务器部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-server</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-SERVER</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- APP单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">应用部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-app</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-APP</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- WEB单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">Web前端部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-web</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-WEB</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- BATCH单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">批处理服务部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-batch</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-BATCH</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- FEX单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">外部适配器部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-fex</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-FEX</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- PROCESS单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">流程服务部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-process</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-PROCESS</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- API单元 -->
                    <div class="bg-white rounded-lg shadow-card overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-center">
                                <h4 class="font-medium text-neutral-700">API服务部署状态</h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已部署</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center text-sm text-neutral-600 mb-3">
                                <i class="fa fa-code-fork mr-2 text-primary"></i>
                                <span>ipdo-api</span>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600 mb-4">
                                <i class="fa fa-id-card-o mr-2 text-primary"></i>
                                <span>IPDO-API</span>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-all-300">
                                    <i class="fa fa-refresh mr-1"></i>重新部署
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 新增发布单元弹窗 -->
    <div id="add-release-unit-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-dropdown max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <!-- 弹窗标题 -->
            <div class="flex justify-between items-center p-6 border-b border-neutral-200">
                <h3 class="text-xl font-bold text-neutral-700">新增发布单元</h3>
                <button id="close-modal-btn" class="text-neutral-400 hover:text-neutral-600 transition-all-300">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 弹窗内容 -->
            <div class="p-6">
                <!-- 已存在的发布单元类型参考 -->
                <div class="mb-6 p-4 bg-neutral-50 rounded-lg">
                    <h4 class="text-sm font-semibold text-neutral-700 mb-3">系统中已存在的发布单元类型</h4>
                    <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">SERVER</span>
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">DB</span>
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">APP</span>
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">WEB</span>
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">BATCH</span>
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">FEX</span>
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">PROCESS</span>
                        <span class="px-3 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">API</span>
                    </div>
                </div>
                
                <!-- 表单 -->
                <form id="add-release-unit-form" class="space-y-4">
                    <!-- 代码仓库模版 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            适用代码仓库模版 <span class="text-danger">*</span>
                        </label>
                        <select id="repo-template" required class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                            <option value="">请选择代码仓库模版</option>
                            <option value="java-springboot">Java SpringBoot 项目</option>
                            <option value="nodejs">Node.js 项目</option>
                            <option value="python">Python 项目</option>
                            <option value="vue">Vue 前端项目</option>
                            <option value="react">React 前端项目</option>
                            <option value="database">数据库脚本</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    
                    <!-- 发布单元类型 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            发布单元类型 <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="unit-type" required placeholder="请输入发布单元类型，如：SERVER、DB、APP等" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                        <p class="text-xs text-neutral-500 mt-1">建议使用大写英文，与现有类型保持一致</p>
                    </div>
                    
                    <!-- 类型描述 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            类型描述 <span class="text-danger">*</span>
                        </label>
                        <textarea id="unit-description" required rows="3" placeholder="请描述该发布单元的用途和功能" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300 resize-none"></textarea>
                    </div>
                    
                    <!-- 应用标识 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            应用标识 <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="app-id" required placeholder="请输入应用标识，如：IPDO-SERVER" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                        <p class="text-xs text-neutral-500 mt-1">建议格式：系统名-单元类型</p>
                    </div>
                    
                    <!-- 代码仓库 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            代码仓库 <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="repo-name" required placeholder="请输入代码仓库名称" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                    </div>
                </form>
            </div>
            
            <!-- 弹窗底部按钮 -->
            <div class="flex justify-end space-x-3 p-6 border-t border-neutral-200 bg-neutral-50">
                <button id="cancel-btn" class="px-4 py-2 bg-white text-neutral-700 border border-neutral-200 rounded-md hover:bg-neutral-50 transition-all-300">
                    取消
                </button>
                <button id="confirm-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                    <i class="fa fa-check mr-2"></i>确认新增
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 返回按钮功能
            document.getElementById('back-button').addEventListener('click', function() {
                window.location.href = 'index.html';
            });

            // 模拟表格行点击效果
            const tableRows = document.querySelectorAll('tbody tr');
            tableRows.forEach(row => {
                row.addEventListener('click', function(e) {
                    // 避免点击复选框时触发行点击效果
                    if (e.target.type !== 'checkbox') {
                        const checkbox = this.querySelector('input[type="checkbox"]');
                        checkbox.checked = !checkbox.checked;
                    }
                });
            });

            // 全选/取消全选功能
            const headerCheckbox = document.querySelector('thead input[type="checkbox"]');
            const rowCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');
            
            headerCheckbox.addEventListener('change', function() {
                const isChecked = this.checked;
                rowCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            });

            // 部署按钮点击效果（模拟）
            const deployButtons = document.querySelectorAll('button:has(.fa-play), button:has(.fa-refresh), button:has(.fa-stop)');
            deployButtons.forEach(button => {
                button.addEventListener('click', function() {
                    console.log('部署操作:', this.textContent.trim());
                    // 这里可以添加实际的部署逻辑
                });
            });
            
            // 新增发布单元弹窗功能
            const modal = document.getElementById('add-release-unit-modal');
            const addBtn = document.getElementById('add-release-unit-btn');
            const closeBtn = document.getElementById('close-modal-btn');
            const cancelBtn = document.getElementById('cancel-btn');
            const confirmBtn = document.getElementById('confirm-btn');
            const form = document.getElementById('add-release-unit-form');
            
            // 打开弹窗
            addBtn.addEventListener('click', function() {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            });
            
            // 关闭弹窗函数
            function closeModal() {
                modal.classList.add('hidden');
                document.body.style.overflow = 'auto';
                form.reset();
            }
            
            // 关闭按钮
            closeBtn.addEventListener('click', closeModal);
            
            // 取消按钮
            cancelBtn.addEventListener('click', closeModal);
            
            // 点击遮罩层关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            });
            
            // 确认新增
            confirmBtn.addEventListener('click', function() {
                if (form.checkValidity()) {
                    const formData = {
                        repoTemplate: document.getElementById('repo-template').value,
                        unitType: document.getElementById('unit-type').value,
                        description: document.getElementById('unit-description').value,
                        appId: document.getElementById('app-id').value,
                        repoName: document.getElementById('repo-name').value
                    };
                    
                    console.log('新增发布单元数据:', formData);
                    
                    // 这里可以添加实际的新增逻辑，例如发送API请求
                    alert('发布单元新增成功！\n\n类型：' + formData.unitType + '\n应用标识：' + formData.appId);
                    
                    closeModal();
                } else {
                    form.reportValidity();
                }
            });
            
            // 系统筛选器变更事件
            const systemFilter = document.getElementById('system-filter');
            systemFilter.addEventListener('change', function() {
                console.log('切换系统:', this.value);
                // 这里可以添加筛选逻辑，例如刷新表格数据
            });
        });
    </script>
    <script>
        // 设计管理菜单展开/收起功能
        document.addEventListener('DOMContentLoaded', function() {
            const designMenuToggle = document.getElementById('design-menu-toggle');
            const designSubmenu = document.getElementById('design-submenu');
            const designMenuWrapper = document.querySelector('.design-menu-wrapper');
            
            if (designMenuToggle && designSubmenu) {
                designMenuToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.querySelector('i').classList.toggle('rotate-90');
                    if (designSubmenu.classList.contains('hidden')) {
                        designSubmenu.classList.remove('hidden');
                        setTimeout(() => {
                            designSubmenu.classList.remove('opacity-0');
                        }, 10);
                    } else {
                        designSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            designSubmenu.classList.add('hidden');
                        }, 300);
                    }
                });
                
                // 点击菜单项外部区域收起菜单
                document.addEventListener('click', function(e) {
                    if (designMenuWrapper && !designMenuWrapper.contains(e.target)) {
                        designSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            designSubmenu.classList.add('hidden');
                        }, 300);
                        if (designMenuToggle.querySelector('i')) {
                            designMenuToggle.querySelector('i').classList.remove('rotate-90');
                        }
                    }
                });
            }
            
            // 测试管理菜单展开/收起功能
            const testMenuToggle = document.getElementById('test-menu-toggle');
            const testSubmenu = document.getElementById('test-submenu');
            const testMenuWrapper = document.querySelector('.test-menu-wrapper');
            
            if (testMenuToggle && testSubmenu) {
                testMenuToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.querySelector('i').classList.toggle('rotate-90');
                    if (testSubmenu.classList.contains('hidden')) {
                        testSubmenu.classList.remove('hidden');
                        setTimeout(() => {
                            testSubmenu.classList.remove('opacity-0');
                        }, 10);
                    } else {
                        testSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            testSubmenu.classList.add('hidden');
                        }, 300);
                    }
                });
                
                // 点击菜单项外部区域收起菜单
                document.addEventListener('click', function(e) {
                    if (testMenuWrapper && !testMenuWrapper.contains(e.target)) {
                        testSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            testSubmenu.classList.add('hidden');
                        }, 300);
                        if (testMenuToggle.querySelector('i')) {
                            testMenuToggle.querySelector('i').classList.remove('rotate-90');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>